import { Image, ScrollView, Swiper, SwiperItem, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import * as T from '../types';
import './shopModule.less';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';
import rightIcon from '@/assets/image/index/right.png';

type IShopProps = T.IProps & T.IShopProps;
//@ts-ignore
@connect<Partial<IShopProps>, T.IShopState>(store2Props, actions)
export default class Info extends Component<Partial<IShopProps>, T.IShopState> {
  constructor(props: IShopProps) {
    super(props);
    this.state = {
      openUrl: '',
      userInfo: '',
      renderList: [],
      unionId: '',
      shopUser: '',
      lists: [], //判断过上下架的商品
    };
  }

  renderItem() {
    let {
      main: { shopList, shopLists },
    } = this.props;
    let ViewItem = [];
    let arrs = [];
    shopList.map((item, index) => {
      shopLists.map((item1, index1) => {
        if (item.skuId == item1.id) {
          arrs.push(item1);
        }
      });
    });
    arrs.map((it, index) => {
      ViewItem.push(
        <View className="item_box" onClick={() => this.itemClick(it.goodsInfo.goodsInfoId)}>
          <View className="icon_box">
            <Image
              src={it.goodsInfo.goodsInfoImg}
              style={{
                // 权益商品要求图片尺寸小点
                // width: (it.goodsInfo.thirdPlatformType == 1 || it.goodsInfo.thirdPlatformType == 2) ? '120px' : '170px',
                // height: (it.goodsInfo.thirdPlatformType == 1 || it.goodsInfo.thirdPlatformType == 2) ? '120px' : '170px',
                width: '170rpx',
                height: '170rpx',
              }}
            />
          </View>
          <Text className="goodsInfoName">{it.goodsInfo.goodsInfoName}</Text>
          <View
            style={{
              flexDirection: 'row',
              alignContent: 'center',
            }}
          >
            <Text style={{ fontSize: '22rpx', color: 'rgb(250,41,44)' }}>
              ¥
              <Text style={{ fontSize: '28rpx', fontWeight: '700', color: 'rgb(250,41,44)' }}>
                {it.goodsInfo.salePrice}
              </Text>
            </Text>
            {it.goodsInfo.thirdPlatformType == 1 || it.goodsInfo.thirdPlatformType == 2 ? (
              <Text
                style={{
                  fontSize: '20rpx',
                  color: '#FA3247',
                  padding: '4rpx 8rpx',
                  backgroundColor: '#FFE6E9',
                  borderRadius: '8rpx',
                }}
              >
                到手价
              </Text>
            ) : null}
          </View>
          <Text style={{ fontSize: '22rpx', textDecorationLine: 'line-through', color: '#999999' }}>
            {it?.linePrice ? '¥' : ''}
            <Text style={{ fontSize: '22rpx', paddingLeft: '8rpx' }}>{it?.linePrice ? it.linePrice : ''}</Text>
          </Text>
        </View>,
      );
    });
    return ViewItem;
  }

  async itemClick(id) {
    let itemStr = Taro.getStorageSync('b2b-wechat@login');
    if (!itemStr) {
      Taro.navigateTo({
        url: '/pages/package-C/login/login/index',
      });
      return;
    }
    //跳转商品详情页面
    Taro.navigateTo({
      url: `/pages/package-B/goods/goods-details/index?skuId=${id}`,
    });
  }

  render() {
    let {
      main: { shopList, shopLists },
    } = this.props;
    return (
      shopList.length > 0 &&
      shopLists.length > 0 && (
        <View className="PageIndexShop">
          <View className="content">
            {/* <Image className='b_bg' mode="widthFix" src={bgIcon} /> */}
            <View
              className="t_box"
              onClick={() =>
                Taro.switchTab({
                  url: `/pages/shop/index`,
                })
              }
            >
              <View className="row">
                <View
                  style={{
                    height: '16px',
                    width: '5px',
                    backgroundColor: '#218CFF',
                    marginRight: '10px',
                  }}
                ></View>
                <Text className="l_title">热销甄选</Text>
                <Text className="t_border"></Text>
                <Text className="r_title">跟着好评买</Text>
              </View>
              <View className="row" style={{ justifyContent: 'center' }}>
                <Text className="more">更多</Text>
                <View style={{ alignContent: 'center', justifyContent: 'center' }}>
                  <Image className="r_img" mode="widthFix" src={rightIcon} />
                </View>
              </View>
            </View>
            <ScrollView scrollX>
              <View className="scroll">{this.renderItem()}</View>
            </ScrollView>
          </View>
        </View>
      )
    );
  }
}

//create by moon https://github.com/creasy2010/moon
